<template>
	<view class="my_coupon">
		<ul v-if="couponList.length>0">
			<li class="row" v-for="(item,index) in couponList" :key="index">
				<view class="coupon_left">
					<p>{{item.money}}</p>
					<span>EGP</span>
				</view>
				<view class="coupon_right">
					<span>period of validity</span>
					<p>{{item.expireDate}}</p>
				</view>
			</li>
		</ul>
		<p class="know" v-if="couponList.length<=0">No discounts available at the moment</p>
	</view>
</template>

<script>
	import { myCoupon } from '@/lib/service';
	export default {
		data() {
			return {
				couponList: []
			}
		},
		onLoad() {
			this.handleCoupon()
		},
		methods: {
			handleCoupon() {
				myCoupon().then((res) => {
					this.couponList = res.data.list || [];
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	ul {
		margin: 0 64rpx;
		margin-top: 30rpx;
	
		li {
			width: 100%;
			height: 120rpx;
			background: url("/static/coupon_bg_01.png") no-repeat;
			background-size: 100% 100%;
			margin-bottom: 16rpx;
	
			.coupon_left {
				color: #ffffff;
				width: 206rpx;
				height: 120rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				p{
					font-size: 50rpx;
					font-weight: bold;
					font-family: Microsoft YaHei UI;
				}
	
				span {
					font-family: Microsoft YaHei UI;
					font-weight: 400;
					font-size: 22rpx;
					margin-left: 8rpx;
					display: inline-block;
					margin-top: 12rpx;
				}
			}
	
			.coupon_right {
				padding-left: 20rpx;
	
				span {
					display: block;
					font-family: Microsoft YaHei UI;
					font-weight: 400;
					font-size: 20rpx;
					color: #999999;
				}
	
				p {
					padding: 0;
					font-family: Microsoft YaHei UI;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					margin-top: 12rpx;
				}
			}
		}
	}
	
	.know {
		text-align: center;
		padding: 200rpx 0;
		color: #999999;
	}
</style>